@extends('admins.layouts.main')
@section('title')
    后台管理 | 添加语句
@endsection

@section('title_left')
    添加语句
@endsection

@section('content')
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Form Design <small>different form elements</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Settings 1</a>
                                </li>
                                <li><a href="#">Settings 2</a>
                                </li>
                            </ul>
                        </li>
                        <li><a class="close-link"><i class="fa fa-close"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <br />
                    <form id="addSentence" data-parsley-validate class="form-horizontal form-label-left" action="/admin/addSentences" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">所属教材 <span class="required">*</span></label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <select id="material" class="select2_multiple form-control" multiple="multiple" id="material" name="material">
                                    @for( $i = 0; $i < count($materials); $i++ )
                                        @if($i === 0)
                                            <option value="{{ $materials[$i]->id }}" selected>{{ $materials[$i]->name }}</option>
                                        @else
                                            <option value="{{ $materials[$i]->id }}">{{ $materials[$i]->name }}</option>
                                        @endif
                                    @endfor
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">所属课本 <span class="required">*</span></label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <select id="book" class="select2_multiple form-control" multiple="multiple" name="book">
                                    @for( $i = 0; $i < count($books); $i++ )
                                        @if($i === 0)
                                            <option value="{{ $books[$i]->id }}" selected>{{ $books[$i]->book }}</option>
                                        @else
                                            <option value="{{ $books[$i]->id }}">{{ $books[$i]->book }}</option>
                                        @endif
                                    @endfor
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">所属课程 <span class="required">*</span></label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <select id="lesson" class="select2_multiple form-control" multiple="multiple" name="lesson">
                                    @for( $i = 0; $i < count($lessons); $i++ )
                                        @if($i === 0)
                                            <option value="{{ $lessons[$i]->id }}" selected>{{ $lessons[$i]->lesson_zh }}</option>
                                        @else
                                            <option value="{{ $lessons[$i]->id }}">{{ $lessons[$i]->lesson_zh }}</option>
                                        @endif
                                    @endfor
                                </select>
                            </div>
                        </div>
                        <div id="sentences">
                            <div class="form-group sentence">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">新增语句 <span class="required">*</span></label>
                                <div class="row">
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <div class="single-sentence">
                                            <input class="form-control col-md-6 col-xs-10 sentences" required="required" type="text" name="sentences[]" placeholder="">
                                            <a href="javascript:;" class="a-upload btn btn-default">
                                                <input type="file" class="form-control col-md-2 col-xs-2 file"  accept="audio/*" name="word_audios[]" required="required">单词音频
                                            </a>
                                            <a href="javascript:;" class="a-upload btn btn-default">
                                                <input type="file" class="form-control col-md-2 col-xs-2 file"  accept="audio/*" name="sentence_audios[]" required="required">语句音频
                                            </a>
                                            <div style="float: right">
                                                <button class="btn btn-primary add" type="button" onclick="inputAdd();"><span class="glyphicon-plus glyphicon"></span></button>
                                                <button class="btn btn-danger remove" type="button" onclick="inputRemove(this);"><span class="glyphicon-remove glyphicon"></span></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ln_solid"></div>
                        <div class="form-group">
                            <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                                <button class="btn btn-primary" type="button">Cancel</button>
                                <button class="btn btn-primary" type="reset">Reset</button>
                                <button type="submit" class="btn btn-success">Submit</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ URL::asset('admin/js/hub.js') }}"></script>
    <script>
        (function (window) {
            var $remove = $('.remove');
            var $sentences = $('#sentences');
            var sentenceDomString = '<div class="form-group sentence"><label class="control-label col-md-3 col-sm-3 col-xs-12"></label><div class="row"><div class="col-md-6 col-sm-6 col-xs-12"><div class="single-sentence"><input class="form-control col-md-6 col-xs-10 sentences"required="required"type="text"name="sentences[]"placeholder=""><a href="javascript:;"class="a-upload btn btn-default"><input type="file"class="form-control col-md-2 col-xs-2 file"accept="audio/*"name="word_audios[]">单词音频</a><a href="javascript:;"class="a-upload btn btn-default"><input type="file"class="form-control col-md-2 col-xs-2 file"accept="audio/*"name="sentence_audios[]">语句音频</a><div style="float: right"><button class="btn btn-primary add"type="button"onclick="inputAdd();"><span class="glyphicon-plus glyphicon"></span></button><button class="btn btn-danger remove"type="button"onclick="inputRemove(this);"><span class="glyphicon-remove glyphicon"></span></button></div></div></div></div></div>';
            $remove.eq(0).remove();
            window.inputAdd = function (e) {
                $sentences.append($(sentenceDomString));
            };

            window.inputRemove = function (e) {
                $(e).parents('.sentence').remove();
            };


        })(typeof window !== 'undefined' ? window : this)
    </script>
    <script>
        linkage.init();
    </script>
@endsection